<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>活动配置</title>
<link rel="stylesheet" type="text/css" href="css/weal.css"/>
<link rel="stylesheet" type="text/css" href="css/active_static.css"/>
</head>

<body>

<!--活动配置弹窗-->
<div id="addTaskMask" v-show="addStatu">
	<div class="mask"></div>
	<div class="addTask">
		<div class="head dm-clearfix">
			<h4 class="bt dm-left">活动配置</h4>
			<a class="close-btn" @click="closeMask">×</a>
		</div>
		<div class="dm-form">
			<form action="" method="" id="taskForm">
				<table width="100%" cellspacing="0" cellpadding="0">
					<tr>
						<td class="tl">活动选择</td>
						<td class="tl">
							<input type="text" class="max-ipt taskName no-wrap" name="taskName" readonly="readonly" placeholder="请选择活动" @click="openAct" :value="selAct" />
						</td>
					</tr>
					<tr>
						<td class="tl">排序码</td>
						<td class="tl">
							<input type="text" class="mid-ipt taskWard" placeholder="值越小越高前" />
						</td>
					</tr>
					<tr>
						<td class="tl"></td>
						<td class="tl btn-box dm-clearfix">
							<input type="button" class="submit dm-left" @click="submitForm" value="确定" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	
	<!--活动选择-->
	<div id="activeSelMod" v-show="selType">
		<div class="head dm-clearfix">
			<h4 class="bt dm-left">选择活动</h4>
			<a class="close-btn" @click="closeSelMod">×</a>
		</div>
		<!--筛选项-->
		<div class="date-selMod dm-clearfix" style="padding-top: 20px;">
			<div class="sel_box mid-sel dm-left">
				<select>
					<option value="">活动类型</option>
					<option value="">砍价活动</option>
					<option value="">瓜分红包活动</option>
					<option value="">报名活动</option>
				</select>
			</div>
			<input type="text" class="mid-ipt dm-left" placeholder="活动名称" />
			
			<input type="button" class="btn bg-m" value="查询" />
		</div>
		<!--表格-->
		<div class="weal-info tc">
			<table class="dm-table" border="1" bordercolor="#ddd" cellpadding="0" cellspacing="0">
				<tr>
					<th width="40">选择</th>
					<th>活动名称</th>
					<th>活动类型</th>
					<th>有效期</th>
				</tr>
				<tr v-for="(item,index) in activeData" v-if='index<7'>
					<td><input type="radio" class="radio" name="selAct" :value="item.id" @change="selCur(item.id)" /></td>
					<td>{{item.name}}</td>
					<td>{{item.type == 0 ? '砍价' : item.type == 1 ? '瓜分红包' : '报名'}}</td>
					<td>{{item.start + '-' + item.end}}</td>
				</tr>
			</table>
		</div>
		
		<div class="pageMod">
			<input type="button" class="first-btn" value="首页" />
			<input type="button" class="prev-btn" value="上一页" />
			<div class="page-box">
				<a class="on">1</a>
				<a>2</a>
				<a>3</a>
				<a>4</a>
				<span>…</span>
				<a>100</a>
			</div>
			<input type="button" class="next-btn" value="下一页" />
			<input type="button" class="last-btn" value="末页" />
		</div>
		
	</div>
</div>




<script src="js/lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="data/data.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

var vm = new Vue({
	el:'#addTaskMask',
	data:{
		addStatu:true,
		activeData:data.active,
		selType:false,
		selAct:null
	},
	methods:{
		//打开活动选择
		openAct:function(){
			var that = this;
			that.selType=true;
		},
		
		//关闭
		closeMask:function(){
			var that = this;
			that.addStatu = false;
		},
		
		//关闭活动选择
		closeSelMod:function(){
			var that = this;
			that.selType = false;
		},
		
		//选择当前活动
		selCur:function(activeId){
			var that = this;
			that.closeSelMod();
			for(i in that.activeData){
				if(that.activeData[i].id == activeId){
					that.selAct = that.activeData[i].name;
				};
			};
		},
		
		//提交
		submitForm:function(){
			var form = $("#taskForm");
			//名称
			if(form.find('.taskName').val()==''){
				alert('请选择活动');
				return false;
			};
			//奖励
			if(form.find('.taskWard').val()==''){
				alert('请输入排序码');
				return false;
			};
			
			//成功提交
			this.closeMask();
			form.submit();
		},
	}
});

</script>

</body>
</html>
